/*
  学习目标：Redux推荐写法
  1. 使用单独的函数维护reducer，通常叫xxxReducer
  2. 使用单独的变量维护初始值，通常叫initState
  3. 使用 switch 语句替换if语句
    
*/
import React from 'react';
import { legacy_createStore as createStore } from 'redux';

// 2. 使用单独的变量维护初始值，通常叫 initState
const initState = { count: 0 };

// 1. 使用单独的函数维护reducer，通常叫xxxReducer
function countReducer(state = initState, action) {
  // 3. 使用switch语句替换if语句
  switch (action.type) {
    case 'add':
      return {
        ...state,
        count: state.count + 1,
      };

    case 'des':
      return {
        ...state,
        count: state.count - 1,
      };

    default:
      // 💥 记得 default 代表 redux 初始化数据，要写
      return state;
  }
}

const store = createStore(countReducer);
console.log('store -----> ', store);

store.dispatch({ type: 'add' });

// 1. 通过订阅，也就是 store.subscribe( 回调 ) 可以监听到数据的变化
// 会返回一个函数，可以解除监听
const unFn = store.subscribe(() => {
  console.log('数据变化了 -----> ', store.getState());
});
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'des' });

// 2. 调用解除监听函数，就不会再监听仓库数据的变化
unFn();

store.dispatch({ type: 'des' });

store.getState();
// console.log('store.getState() -----> ', store.getState());

export default function App() {
  return <div></div>;
}
